<!-- eslint-disable vue/multi-word-component-names -->
<!-- 待领养宠物框组件 -->
<template>
    <div class="pet-introductin-container">
      <div class="header">
        <span class="logo">🐾</span>
        <a href="#" class="more" @click="goToAllPetsPage">更多></a>
      </div>
      <!-- 宠物项 -->
      <div class="pet-container">
        <div class="pet-item" v-for="(pet, index) in firstFivePets" :key="index" @click="goToDetail(pet.petId)">
          <img :src="pet.coverImage" alt="宠物图片" class="pet-img">
          <div class="pet-info">
            <div class="name">宠物名字：{{ pet.petName }}</div>
            <div class="breed">品种：{{ pet.breed }}</div>
            <div class="age">年龄: {{ pet.age }}</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import {getPetListAPI} from "@/api/pet"
import {computed, onMounted, ref} from "vue"
import { useRouter } from "vue-router"

const router = useRouter();

//获取并存储宠物列表
const PetsList=ref([])
const getPetList=async ()=>{
    const res=await getPetListAPI()
    PetsList.value=res.data.items
    console.log(PetsList.value)
}
onMounted(()=>{
    getPetList()
})

// 计算属性，只取前五个宠物
const firstFivePets = computed(() => PetsList.value.slice(0, 5));
// console.log(firstFivePets)

// 跳转到全部宠物列表页面：pets/index.vue
const goToAllPetsPage = () => {
    router.push({ path: "/pets-list/all" })
};

// 跳转到宠物详情页面:路径包含宠物id
const goToDetail = (petId) => {
  router.push(`/petdetail/${petId}`);
};
</script>

<style lang="scss" scoped>

.pet-introductin-container {
  background-color: #f4f4f4;
  padding: 10px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.logo {
  font-size: 24px;
  margin-right: 10px;
}
.title {
  font-size: 20px;
}
.more:hover{
  text-decoration: underline;
} 

.pet-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pet-item {
  width: calc(20% - 10px);
  margin-bottom: 10px;
  background-color: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.pet-img {
  width: 100%;
  height: 200px;
  display: block;
}
.pet-info {
  padding: 10px;
}
.name {
  font-size: 14px;
  color: #999;
}
.breed {
  font-size: 14px;
  color: #999;
}
.age {
  font-size: 14px;
  color: #999;
}
</style>
